<script setup lang='ts'>
  import { reactive, ref } from 'vue';
  import request from '@/api/index';
  import xmdialog from '@/components/xmdialog.vue';
  import { xmloading } from '@/utils/public';
  const action = reactive({
    logShow:false,
    list:[] as Array<any>
  })
  const listQuery = reactive({
    page:1,
    limit:20,
  })
  const getTime = (time:number = 0)=>{
    if(!time) return
    const date = new Date(time * 1000)
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hh = date.getHours();
    const mm = date.getMinutes();
    return `${month}-${day} ${hh < 10?'0'+hh : hh}:${mm < 10?'0'+mm : mm}`
  }
  const loadingSet = ref(false); // 是否处于加载状态
  const loadSet = ref(true); // 是否已加载完成 不再触发 load 事件
  const listload = ()=> {
    if(loadSet.value || action.list.length == 0) return
    listQuery.page += 1
    getList();
  };
  const getList = async()=>{
    const loading = xmloading()
    const res = await request.getUserTicketCost(listQuery)
    const { data=[] } = res
    loading.close()
    // 列表返回空 禁止触底事件
    if(data.length == 0) {
      loadSet.value = true
      return
    }
    action.list = [...action.list, ...data]
    loadSet.value = false
    loadingSet.value = false
    if(data.length < listQuery.limit) {
      loadSet.value = true
    }
  }
  const openDilaog = async()=>{
    await getList()
    action.logShow = true
  }
  defineExpose({
    openDilaog
  })
</script>

<template>
  <xmdialog v-model:dialogshow="action.logShow">
    <xmimg src="ticket/logTitleimg.png" class="titleimg" />
    <div class="listBackImg">
      <div class="tipsFont">可在下方游戏消耗金豆获取人气票</div>
      <van-list
        class="list"
        :offset="30"
        v-model:loading="loadingSet"
        :finished="loadSet"
        @load="listload">
        <div v-for="item in action.list" class="logInfo flex-align">
          <div class="flex-align">
            <!-- <div class="imageBack" :style="{'--radiusNum':'100%'}"></div> -->
            <div class="name">打赏人气票</div>
          </div>
          <dl class="info">
            <dt>{{ item.gift_num }}</dt>
            <dd>{{ getTime(item.created_at) }}</dd>
          </dl>
        </div>
      </van-list>
    </div>
  </xmdialog>
</template>

<style lang='scss' scoped>
  :deep(.dialog-popup) {
    .Functionality {
      position: relative;
      padding: 19px 0 0;
      box-sizing: border-box;
    }
  }
  .titleimg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 184px;
    height: 38px;
  }
  .listBackImg {
    width: 282px;
    height: 376px;
    padding: 35px 15px 15px;
    box-sizing: border-box;
    background: var(--ticketLogBack);
    display: flex;
    flex-direction: column;
    .tipsFont {
      font-weight: 400;
      font-size: 10px;
      color: var(--ticketLogTipsFontColor);
      line-height: 10px;
      text-align: center;
      margin-bottom: 12px;
    }
    .list::-webkit-scrollbar {
      display: none;
    }
    .list {
      overflow-x: hidden;
      overflow-y: auto;
      width: 100%;
      height: 100%;
      .logInfo {
        margin-bottom: 12px;
        // .imageBack {
        //   width: 60px;
        //   height: 60px;
        //   margin-right: 8px;
        //   background: #000;
        //   border-radius: var(--radiusNum);
        // }
        .name {
          color: var(--ticketLogNameFontColor);
          font-size: 14px;
          font-weight: 500;
        }
        .info {
          margin: 0 0 0 auto;
          text-align: right;
          dt {
            color: var(--ticketLogNumFontColor);
            font-size: 18px;
            font-weight: 500;
          }
          dd {
            color: var(--ticketLogTimeFontColor);
            font-size: 12px;
            font-weight: 400;
            margin-top: 5px;
          }
        }
      }
      .logInfo:nth-last-child(1) {
        margin-bottom: 0;
      }
    }
  }
</style>